import {useEffect,useState} from 'react'
import { DataInfo } from './dataInfo'
const OutPutPage = () => {
  const [showIndex, setShowIndex] = useState(0)
  const selectItem = (index: number) => {
    setShowIndex(index)
  }

  
   return  <div style={{marginLeft:'20px'}}>
  {
    DataInfo?.map((item:any,index:number) => {
      return <div style={{ marginBottom: '0x' ,display:'flex'}} onClick={() => selectItem(index)}>
        <img
          style={{ width: '200px', height: '200px', margin: '5px', borderRadius: '8px', border: '3px solid #333' }}
          src={require(`../../../public/images/${item.imgPath}`)} />
        {/* 右侧 */}
        <div style={{ padding: '15px' , display: index === showIndex ? 'block' : 'none'}}>
          <span style={{ color: '#000', fontSize: '18px', paddingLeft: '20px' }}>{item?.title}</span>
          <span>,</span>
          <span style={{ color: '#333', fontSize: '16px' }}> {item?.des}</span>
        </div>
      </div>
    })
  }
</div>
}
export default OutPutPage